/* index Page Javascript */
var fitems={};
var sltditem_manager=(function(el){this.init(el);});
sltditem_manager.prototype={
	 target:null
	,items:{}
	,off_on_func:null
	,on_off_func:null
	,status:{switch_event:'dblclick',switch_flg:false}
	,format:'<div class="content"><img id="myitem{0}" class="itemimg" src="{1}" onmousedown="return false"/></div>'
	,init:function(el){
		this.target=$(el);
		var a=this,b=this.target,c=false;
		// off -> on
		this.off_on_func=(function(){
			if(fc.getlenAary(a.items)<1){return null;}
			// mode on
			// when user cursor on myitem,item of contents is onmouse function execute.so reset
			$('#contents .content_on').attr('class','content');
			// it only show User selected items
			$('#contents .content:visible').fadeOut(
				 'normal'
				,function(){
					$('#contents .content[selected=true]').fadeIn(
						'normal'
						,function(){
							a.status.switch_flg=true;
							a.myon();
						}
					);
				}
			);
		});
		// on -> off
		this.on_off_func=(function(){
			if(!a.status.switch_flg){return null;}
			// mode off
			// it all show All items
			$('#contents .content:visible').fadeOut(
				 'normal'
				,function(){
					$('#contents .content[search=correct]').fadeIn(
						 'normal'
						,function(){
							a.status.switch_flg=false;
							a.myoff();
						}
					);
				}
			);
		});
		//event set
		this.myoff();
	}
	,myon:function(){
		$('#myitems')
		.css({opacity:0.7})
		.unbind(this.status.switch_event)
		.bind(this.status.switch_event,this.on_off_func);
	}
	,myoff:function(){
		$('#myitems')
		.css({opacity:1})
		.unbind(this.status.switch_event)
		.bind(this.status.switch_event,this.off_on_func);
	}
	/*a = src object
	  can use list of under
	  .src 
	  .id
	*/
	,add:function(a){
		var id=a.img;
		//if added already, exit function
		if(this.items[id]){return false;}
		var tmp=$(fc.format(this.format,[a.id,a.img]));
		//add to list : a -> fitem object
		this.items[id]=a;
		//add html
		tmp.hide();
		this.target.append(tmp);
		tmp.fadeIn('normal');
		//add attr of items element
		a.el.attr('selected','true');
		//set event
		var b=this;
		tmp.hover(
			 function(){
			 	if(b.status.switch_flg){return null;}
			 	a.el.attr('class','content_on');
			 }
			 ,function(){
			 	if(b.status.switch_flg){return null;}
			 	a.el.attr('class','content');
			 }
		);
		return true;
	}
	,del:function(a){
		var id=fc.getfilen(a.img);
		//delete from list
		delete this.items[id];
		//delete form html
		this.target.remove('#myitem'+id);
		//delete attr of items element
		a.el.removeAttr('selected');
	},
	setAddEvent:function(a){
		var b=this,c=false,d={},f=null,g={},etmp=null,n=false,xy=5;
		a.el.find('img.itemimg').mousedown((function(e){
			if(b.status.switch_flg || b.items[a.img]){return false;}
			c=true;
			d.x=e.screenX;
			d.y=e.screenY-$(this).scrollTop();
			g.x=d.x-a.el.offset().left;
			g.y=d.y-a.el.offset().top;
			$(document).mousemove((function(e){
				if(!c){return false;}
				if(f){
					f.css({
						 top:e.screenY-g.y-$(this).scrollTop()
						,left:e.screenX-g.x
					});
					if(e.clientY<$('#head').height()){
						if(!n){return false;}
						n=false;
						$('#head').css({'background-color':'rgba(0, 100, 0, 0.3)'});
					}else{
						if(n){return false;}
						n=true;
						$('#head').css({'background-color':'rgba(0, 0, 0, 0.3)'});
					}
					return false;
				}
				var x=d.x-e.screenX,y=d.y-e.screenY;
				if(x > xy || -xy > x || y > xy || -xy > y){
					f=a.el.clone().css({
						 position:'absolute'
						,top:y
						,left:x
						,opacity:0.9
						//,border:'3px solid red'
					});f.find('div').empty();
					$(b.target).append(f);
					n=false;
				}
			})).mouseup((function(e){
				if(e.clientY<$('#head').height() && b.add(a)){
					f.animate({
						 height:0
						,width:0
						,top:e.clientY
						,left:b.target.width()
					},400);
				}
				$(this).unbind('mousemove').unbind('mouseup');
				$('#head').css({'background-color':'#ffffff'}).unbind('mouseover');
				c=false;
				if(f){
					f[0].parentNode.removeChild(f[0]);
					f=null;
				}
			}));
		}));
	}
};
//Onload
jQuery(function(){
	var myitems= new sltditem_manager(fc.$id('myitems'));
	var details= new itemdetail();
	
	var imgary=new Array();
	//sample data
	for(var i=0;i<30;i++){
		var id_tmp='detail'+(i==0?'':'-'+i)+'.jpeg';
		imgary.push({
			id:id_tmp
			,img:'img/'+id_tmp
			,name:'name'+i
			,brand:'brand'+i
			,store:'store_name'+i
		});
	}
	
	// set image of items
	var tmp=null,tmp2=null;
	$('#contents').hide();
	jQuery.each(imgary,function(){
		//tmp={'id':imgary[i]['id']};
		tmp2=new fitem(this);
		tmp2.appendEl('contents');
		fitems[tmp2.id]=tmp2;
		myitems.setAddEvent(tmp2);
		details.setAddEvent(tmp2);
	});
	$('#contents').fadeIn(500);
	
	$("#contents .content").hover(
		 function(){
		 	$(this).attr('class','content_on');
		 }
		,function(){
		 	$(this).attr('class','content');
		}
	);
	
	var search_exe=(function(){
		var a=$('#search_bar');
		if(!fc.cknull(a.val())){return null;}
		myitems.myoff();
		var result=true,dbary=new Array(),jsary=new Array();
		//make search request(DB)
		//sample code
		//make search request(JS)
		var b=new RegExp('('+a.val().replace(' ','|')+')'),c=null;
		for(var d in fitems){
			c=fitems[d];
			if(c.name.match(b)){
				jsary.push(c);
			}
		}
		if(jsary.length <= 0){
			//if not found match item 
			alert('not found');
			return false;
		}
		// all hide item
		$('#contents .content').attr('search','miss').filter(':visible')
		.fadeOut(
			 'normal'
			,function(){
				// show item exe
				for(var e in jsary){jsary[e].el.attr('search','correct')}
				$('#contents .content[search=correct]').fadeIn('normal');
			}
		);
		//request -> DB
		//display clean
	});
	$('#search_btn').click(search_exe);
	$('#search_bar').keypress(function(key_value){
		//which code 13 -> Enter key
		if(key_value.which!=13){return null;}
		search_exe();
	});
	//set function for image of items
	/*
	change -> fitem function
	$('#contents .content img').dblclick(function(){
		myitems.add(this);
	});
	*/
});